<template>
  <van-pull-refresh v-model="loadState.pullLoading" :disabled="pullDisabled" @refresh="onRefresh">
    <virtual-list ref="vsl" class="my_scrollbar h-full overflow-y-auto" :data-key="'conversationID'"
      :data-sources="conversationStore.storeConversationList" :data-component="ConversationListItemVue"
      :estimate-size="88" @tobottom="onBottom" @scroll="onScoll" />
  </van-pull-refresh>
</template>

<script setup lang="ts">
import useConversationStore from '@/store/modules/conversation'
import VirtualList from '@components/VirtualList'
import ConversationListItemVue from './ConversationListItem.vue'

const emit = defineEmits([])

const conversationStore = useConversationStore()
const loadState = reactive({
  loading: false,
  pullLoading: false,
  hasMore: true,
})
const pullDisabled = ref(false)

const onBottom = async () => {
  if (loadState.hasMore && !loadState.loading) {
    loadState.loading = true
    loadState.hasMore = await conversationStore.getConversationListFromReq(true)
    loadState.loading = false
  }
}

const onScoll = (e: any) => {
  pullDisabled.value = e.target.scrollTop > 0
}

const onRefresh = async () => {
  await conversationStore.getConversationListFromReq()
  loadState.pullLoading = false
}
</script>

<style lang="scss" scoped>
.van-pull-refresh {
  flex: 1;
}
</style>
